<template>
  <div style="padding-top: 20px">

        <el-select v-model="roleIds" multiple placeholder="请选择用户类型">
          <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id">
          </el-option>
        </el-select>
        <div slot="footer" class="dialog-footer" style="padding-top: 30px">
          <el-button @click="go_back">返回</el-button>
          <el-button type="primary" @click.native="editSubmit" :loading="addLoading">提交</el-button>
        </div>
  </div>
</template>
<script>
    //导入cmsApi中的所有接口
    import * as userApi from '../api/user'

    export default {
        data() {
            return {
                userId: '',
                roleList: [],
                addLoading: false,//加载效果标记
                //角色
                roleIds: []
            }
        },
        methods: {
            //返回主页面调用的方法
            go_back() {
                //设置路由
                this.$router.push({
                    path: '/system/user/list',
                    //设置路由携带的参数为当前路由中的参数
                    query: {
                        page: this.$route.query.page,
                    }
                })
            },
            //提交用户角色
            editSubmit() {
                console.log(this.roleName)
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    this.addLoading = true;
                    userApi.user_setrole(this.userId, this.roleIds.join(",")).then((res) => {
                        console.log(res);
                        if (res.success) {
                            this.addLoading = false;
                            this.$message({
                                message: '提交成功',
                                type: 'success'
                            });
                            //返回主页面
                            this.go_back();
                        } else {
                            this.addLoading = false;
                            if (res.message) {
                                this.$message.error(res.message);
                            } else {
                                this.$message.error('提交失败');
                            }
                        }
                    });
                });
            },
        },
        //钩子方法，页面创建渲染之前调用
        created: function () {
            //从url中获取pageId,params指的是从url中获取指定参数
            this.userId = this.$route.params.userId;
            //查询角色列表
            userApi.user_roleList().then((res) => {
                console.log(res);
                if (res.success) {
                    this.roleList = res.queryResult.list;
                }
            });
            //查询用户拥有的角色
            userApi.user_getUserRole(this.userId).then((res)=>{
               if(res){
                   this.roleIds = res;
               }
            });
        },
        //钩子方法，在页面渲染之后调用
        mounted: function () {

        }
    }
</script>
<style>

</style>
